<template>
  <div class="printDetails-wrap">
    <div class="content">
      <p>号牌号码：{{carInfo.carNum}}</p>
      <p>
        提交时间：
        <span>{{times.o}}</span>
        <span>{{times.t}}</span>
      </p>

      <AQrcode v-if="isDrow" :bQrUrl="bQrUrl"></AQrcode>

      <!-- <VueQr v-if="isDrow == true" :size="200" :logoSrc="qrcodeVue.imageUrl" :text="qrcodeVue.text"></VueQr> -->

      <p class="text">凭此二维码到单据打印处打印单据</p>
    </div>

    <van-button color="#fd4b05" to="/">返回首页</van-button>
  </div>
</template>

<script>
import { getDate } from '@/utils/index'
import AQrcode from '@/components/qrcode'

export default {
  name: 'printDetails',
  data() {
    return {
      carInfo: {},
      bQrUrl: null,
      isDrow: false,
      times: ''
    }
  },
  created() {
    if (!this.$route.params.carInfo) {
      this.$router.go(-1)
    }
    this.$nextTick(() => {
      // let str = 'http://dccjyuyue.vaiwan.com/'
      this.carInfo = this.$route.params.carInfo
      console.log(this.$route.params.carInfo, '---------carInfo ----- ')
      this.times = getDate(new Date().getTime(), 'year')
      this.isDrow = true //控制二维码的显示隐藏

      this.bQrUrl = `${this.$route.params.carInfo.id}`

      // this.handleQrcodeToDataUrl()

      document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
    })
  },
  components: {
    AQrcode
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.printDetails-wrap {
  .content {
    width: 84%;
    border-radius: 0.267rem;
    background-color: #fff;
    margin: 1.52rem auto 0;
    padding: 0.133rem 0 0.4rem;
    p {
      font-size: 0.4rem;
      line-height: 0.92rem;
      text-indent: 0.533rem;
    }
    /deep/ .qrcode_box {
      display: block;
      margin: 0.4rem auto;
      img {
        margin: 0.4rem auto;
        display: none;
      }
    }
  }
  .van-button {
    width: 84%;
    margin: 7% auto;
    display: block;
    border-radius: 0.267rem;
  }
}
</style>
